<template>
	<view class="open-box1">
		<u-navbar bgColor="#fff" :placeholder="true" :fixed="true" @leftClick="$back" title="新增信息" titleStyle="{'color': '#000'}">
			
		</u-navbar>
		<view class="top-tip display-flex">
			<image :src=" '/images/notice_g.png' | formatImgUrl"></image>
			<text>请您核实发票信息，确保信息填写正确，以免影响发票的后续使用。</text>
		</view>
		<view class="box1-item display-flex just-between">
			<view class="box1-left display-flex">
				<view class="tit">
					抬头类型
				</view>
				<text>*</text>
			</view>
		
			<view class="box1-right display-flex">
				<u-radio-group v-model="checkedValue" @change="checkboxChange">
					<u-radio activeColor="#fff" inactiveColor="#999999" iconColor="#45C4B0" labelColor="#3D3D3D"
						shape="circle" v-for="(item, index) in radiolist" :key="index" :name="item.name"
						:disabled="item.disabled">
						{{item.name}}
					</u-radio>
				</u-radio-group>
			</view>
		</view>
		<view class="box-input">
			<view class="box1-item display-flex just-between">
				<view class="box1-left display-flex">
					<view class="tit">
						发票抬头
					</view>
					<text>*</text>
				</view>
			
				<input type="text" placeholder="填写发票抬头" v-model="top_title">
			</view>
			
			<view class="box1-item display-flex just-between">
				<view class="box1-left display-flex">
					<view class="tit">
						纳税人识别号
					</view>
					<text>*</text>
				</view>
			
				<input type="text" placeholder="填写纳税人识别号" v-model="qy_taxpayer">
			</view>
			
			<view class="box1-item display-flex just-between">
				<view class="box1-left display-flex">
					<view class="tit">
						基本开户银行
					</view>
				</view>
			
				<input type="text" placeholder="请填写开户许可证上的开户银行" v-model="qy_khh">
			</view>
			<view class="box1-item display-flex just-between">
				<view class="box1-left display-flex">
					<view class="tit">
						基本开户账号
					</view>
				</view>
			
				<input type="text" placeholder="请填写开户许可证上的银行账号" v-model="qy_account">
			</view>
			<view class="box1-item display-flex just-between">
				<view class="box1-left display-flex">
					<view class="tit">
						企业注册地址
					</view>
				</view>
			
				<input type="text" placeholder="请填写营业执照上的注册地址" v-model="qy_address">
			</view>
			<view class="box1-item display-flex just-between">
				<view class="box1-left display-flex">
					<view class="tit">
						企业注册电话
					</view>
				</view>
			
				<input type="text" placeholder="请填写企业有效的联系电话" v-model="qy_phone">
			</view>
		</view>
		
		<view class="subbox" @tap="onSubmit">
			<text>确定{{ id ? '编辑' : '新增'}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				top_title: '',
				qy_taxpayer: '',
				qy_khh: '',
				qy_account: '',
				qy_address: '',
				qy_phone: '',
				radiolist: [{
					name: '个人',
					disabled: false
				}, {
					name: '企业',
					disabled: false
				}, {
					name: '组织',
					disabled: false
				}],
				checked: [],
				checkedValue: '个人',
				id: ''
			}
		},
		onLoad(e) {
			this.id = e.id || ''
			this.getInfo()
		},
		methods:{
			checkboxChange(n) {
				this.top_title= ''
				this.qy_taxpayer= ''
				this.qy_khh= ''
				this.qy_account= ''
				this.qy_address= ''
				this.qy_phone= ''
				this.zz_taxpayer= ''
			},
			getInfo(){
				this.$api.default.request('invoice/applyInvoiceHisDea',{
					id: this.id
				}).then((res) => {
					if (res.code == 1 && res.data) {
						this.checkedValue = res.data.type == 0 ? '个人' : (res.data.type == 1 ? '企业' : '组织')
						this.top_title= res.data.top_title || ''
						this.qy_taxpayer= res.data.qy_taxpayer || ''
						this.qy_khh= res.data.qy_khh || ''
						this.qy_account= res.data.qy_account || ''
						this.qy_address= res.data.qy_address || ''
						this.qy_address= res.data.qy_address || ''
						this.qy_address= res.data.qy_address || ''
					}
				})
			},
			// 提交申请
			onSubmit(){
				if(!this.top_title){
					this.$common.errorToShow('请填写发票抬头')
					return
				}
				
				if(this.checkedValue == '企业'){
					if(!this.qy_taxpayer){
						this.$common.errorToShow('请填写纳税人识别号')
						return
					}
				}
				
				if(this.checkedValue == '组织'){
					if(!this.zz_taxpayer){
						this.$common.errorToShow('请填写纳税人识别号')
						return
					}
				}
				
				this.$api.default.request('invoice/applyInvoiceHis',{
					id: this.id,
					top_title: this.top_title,
					qy_taxpayer: this.qy_taxpayer,
					qy_khh: this.qy_khh,
					qy_account: this.qy_account,
					qy_address: this.qy_address,
					qy_phone: this.qy_phone,
					zz_taxpayer: this.zz_taxpayer,
					type: this.checkedValue == '个人' ? 0 : (this.checkedValue == '企业' ? 1 : 2)
				}).then((res) => {
					if (res.code == 1) {
						this.$common.successToShow(res.msg,()=>{
							// this.$go('/showcase/showcase/invoice_result')
							uni.navigateBack()
						})
					}else{
						this.$common.errorToShow(res.msg)
					}
				})
				
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background: rgba(242, 245, 242, 1);
	}
	
	/deep/.u-radio {
		margin-left: 15rpx;
		font-size: 14px;
		color: #3D3D3D;
	}
	
	.top-tip {
		padding: 14rpx 18rpx;
		border-radius: 4px;
		background: rgba(69, 196, 176, 0.15);
		font-family: Source Han Sans CN;
		font-size: 12px;
		color: #45C4B0;
		align-items: flex-start;
	
		image {
			width: 22rpx;
			height: 22rpx;
			margin-right: 8rpx;
			margin-top: 5rpx;
		}
	
	}
	
	.open-box1 {
		padding: 20rpx 30rpx;
		padding-bottom: 0;
		background-color: #fff;
	
		.box1-item {
			padding: 30rpx 0;
			border-bottom: 1px solid rgba(153, 153, 153, 0.1);
		
			.box1-left {
				font-family: Source Han Sans CN;
				font-size: 14px;
				color: #3D3D3D;
		
				text {
					color: #FF0000;
				}
			}
		}
		
		
	}
	
	.subbox {
		position: fixed;
		bottom: 0;
		left: 0;
		padding-top: 10px;
		padding-bottom: calc(var(--window-bottom) + 10px);
		background-color: #fff;
		display: flex;align-items: center;
		justify-content: center;
		width: 100%;
		
		text{
			width: 630rpx;
			height: 86rpx;
			border-radius: 8px;
			opacity: 1;
			background: #45C4B0;
			text-align: center;
			line-height: 86rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #FFFFFF;
		}
	}
	
	.box-input{
		background-color: #fff;
		
		input{
			width: 70%;
			text-align: right;
			font-family: Source Han Sans CN;
			font-size: 14px;
			color: #3D3D3D;
		}
	}
</style>